<template>
  <div class="component-container">
    <div class="flex-table">
      <el-table :data="workList" border height="100%" v-loading="loading">
        <el-table-column label="序号" type="index" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deptName" label="站办所" width="150" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="worker" label="评分对象" width="180" align="center"></el-table-column>
        <el-table-column prop="phone" label="联系电话" align="center" width="150"></el-table-column>
        <el-table-column prop="serviceTypeDict" label="服务类型" align="center">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.biz_evaluate_service_type" :value="scope.row.serviceTypeDict" />
          </template>
        </el-table-column>
        <el-table-column v-for="item in dict.type.biz_evaluate_grade" :key="item.value" :label="item.label" align="center">
          <template slot-scope="scope">
            <span :class="scope.row.evaluateGradeDict === item.value ? 'color-primary' : ''">
              <b> {{ scope.row.evaluateGradeDict === item.value ? scope.row.evaluateGradeDictName : '-' }}</b>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="voiceMaterialUrls" label="完成材料" min-width="180" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.voiceMaterialUrls">
              <el-tooltip
                v-for="(url, index) in scope.row.voiceMaterialUrls.split(',')"
                :key="index"
                effect="dark"
                :content="formatFileUrl(url)['name']"
                placement="top-start"
              >
                <el-button type="text" @click="handlePreviewFile(url)" size="mini" class="file-preview-btn">
                  {{ formatFileUrl(url)['name'] }}
                </el-button>
              </el-tooltip>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" min-width="150" label="备注" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="score" label="扣分" align="center"></el-table-column>
      </el-table>
    </div>
    <pagination v-if="tableTotal > 0" :total="tableTotal" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    <FilePreview :visible.sync="filePreviewVisible" :file="previewFile"></FilePreview>
  </div>
</template>

<script>
import { list } from '@/api/work-approval/evaluation-comment/performance'
import FilePreview from '@/components/FilePreview'
import { mixins } from '@/mixins'
export default {
  name: 'performance-inventory_dept_jxb-evaluation-comment',
  dicts: ['biz_evaluate_service_type', 'biz_evaluate_grade'],
  mixins: [mixins],
  props: {
    queryForm: {
      type: Object,
      default: () => {}
    }
  },
  components: { FilePreview },
  data() {
    return {
      total: 0,
      filePreviewVisible: false,
      previewFile: {},
      loading: false,
      workList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 20
      }
    }
  },
  computed: {},
  watch: {
    queryForm: {
      deep: true,
      immediate: true,
      handler(query) {
        this.queryParams = { ...this.queryParams, ...query }
        this.getList()
      }
    }
  },

  methods: {
    // 预览文件
    handlePreviewFile(url) {
      let fileItem = this.formatFileUrl(url)
      this.previewFile = { url, ...fileItem }
      this.filePreviewVisible = true
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.pageNum = 1
      this.handleQuery()
    },
    getList() {
      this.loading = true
      list(this.queryParams)
        .then(res => {
          this.tableTotal = res.total
          this.loading = false
          this.workList = res.rows
        })
        .catch(err => (this.loading = false))
    }
  }
}
</script>

<style lang="scss"></style>
